<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <title>菜单管理</title>

  <!-- 自定义树样式 -->
  <link rel="stylesheet" href="${ctx}/static/support/bootstrap-tree/tree.css" type="text/css"/>
</head>
<body>
<div class="container-fluid">
  <!-- 路径导航 -->
  <ol class="breadcrumb">
    <li><a href="${ctx}/workbench">主页</a></li>
    <li><a href="${ctx}/sidebar">菜单管理</a></li>
    <li class="active">
      <c:if test="${action eq 'create'}">添加菜单</c:if>
      <c:if test="${action eq 'update'}">修改菜单</c:if>
    </li>
  </ol>
  <!-- /路径导航 -->

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <c:if test="${action eq 'create'}">添加菜单</c:if>
        <c:if test="${action eq 'update'}">修改菜单</c:if>
      </h3>
    </div>

    <div class="panel-body">
      <form class="form-horizontal" id="sidebar-form" action="${ctx}/sidebar/${action}" method="post" role="form">
        <input type="hidden" id="sidebar-id" name="id" value="${sidebar.id}">

        <div class="form-group">
          <label for="sidebar-name" class="col-sm-2 control-label">菜单名称</label>

          <div class="col-sm-10">
            <input type="text" class="form-control" id="sidebar-name" name="name" value="${sidebar.name}" placeholder="名称">
          </div>
        </div>

        <div class="form-group">
          <label for="sidebar-name" class="col-sm-2 control-label">菜单代码</label>

          <div class="col-sm-10">
            <input type="text" class="form-control" id="sidebar-code" name="code" value="${sidebar.code}" placeholder="代码">
          </div>
        </div>

        <div class="form-group">
          <label for="sidebar-name" class="col-sm-2 control-label">访问地址</label>

          <div class="col-sm-10">
            <input type="text" class="form-control" id="sidebar-href" name="href" value="${sidebar.href}" placeholder="地址">
          </div>
        </div>

        <div class="form-group">
          <label for="sidebar-name" class="col-sm-2 control-label">上级菜单</label>

          <div class="col-sm-10">
            <div class="input-group">
              <input type="text" id="pre-sidebar-name" value="${sidebar.preSidebar.name}" class="form-control" placeholder="上级菜单" readonly="readonly"/>
              <input type="hidden" id="pre-sidebar-id" name="preSidebar.id" value="${sidebar.preSidebar.id}" class="form-control"/>

              <span class="input-group-addon">
                <i class="iconfont icon-double-arrow-down" style="cursor: pointer;"></i>
              </span>
            </div>
            <div id="sidebar-tree" style="display:none;"></div>

          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" onclick="return confirm('是否提交上面的信息？')"> 提 交</button>
            <button type="button" class="btn btn-default" onclick="history.back()"> 返 回</button>
          </div>
        </div>
      </form>
    </div>

  </div>

</div>

<!-- 以下开始 加载JS动态效果 -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${ctx}/static/jquery/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${ctx}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

<!-- bootstrap-tree 自定义树 -->
<script src="${ctx}/static/support/bootstrap-tree/bootstrap.asynchronous.tree.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function () {
    Tree.setPath("${ctx}");  //设置项目路径
    jQuery.ajax({
      url: "${ctx}/sidebar/asyn_tree",
      type: "post",
      dataType: "json",
      success: function (msg) {
        Tree.setData(msg);
        Tree.init("#sidebar-tree");
        Tree.onClick(function (node) {
          $("#pre-sidebar-name").val(node.name);
          $("#pre-sidebar-id").val(node.id);
          $("#sidebar-tree").hide();
          $(".icon-double-arrow-up").removeClass("icon-double-arrow-up").addClass("icon-double-arrow-down");
        });
      }
    });

    $("#pre-sidebar-name, .icon-double-arrow-down, .icon-double-arrow-up").click(function () {
      var sidebarText = $("#pre-sidebar-name");
      $("#sidebar-tree").width(sidebarText.outerWidth());

      if ($("#sidebar-tree").css("display") == 'none') {
        $("#sidebar-tree").show();
        $("#sidebar-tree").offset({
          top: sidebarText.offset().top + sidebarText.outerHeight(),
          left: sidebarText.offset().left
        });
        $(".icon-double-arrow-down").removeClass("icon-double-arrow-down").addClass("icon-double-arrow-up");
      } else {
        $(".icon-double-arrow-up").removeClass("icon-double-arrow-up").addClass("icon-double-arrow-down");
        $("#sidebar-tree").hide();
      }

    });

  });
</script>
</body>
</html>
